<template>
  <div class="title">
    <span style="font-size: 20px; font-weight: light"
      >标题：{{ articletitle }}</span
    >
    <span style="font-size: 15px; font-weight: light; margin-left: 5%"
      >发布人id：{{ userid }}</span
    >
  </div>
  <div class="all">
    <div class="concrete">
      <div id="art-container" class="article">
        
      </div>
      <div class="tab">
        <a-table :columns="columns2" :data-source="dataSource2" rowKey="a_id">
          <template #at_tab="{ record }">
            <a-tag color="green">{{ record.at_tab }}</a-tag>
          </template>
          <template #at_name="{ record }">
            <a-tag color="blue">{{ record.at_name }}</a-tag>
          </template>
          <template #action="{ record }">
            <a-breadcrumb-item>
              <a>编辑</a>
              <template #overlay>
                <a-menu>
                  <a-menu-item>
                    <a
                      target="_blank"
                      rel="noopener noreferrer"
                      @click="deletetab(record.at_tab)"
                      >删除</a
                    >
                  </a-menu-item>
                  <a-menu-item>
                    <a
                      target="_blank"
                      rel="noopener noreferrer"
                      @click="showModal(record.at_tab)"
                      >修改</a
                    >
                  </a-menu-item>
                </a-menu>
              </template>
            </a-breadcrumb-item>
            <a-modal
              v-model:visible="visible"
              title="修改标签内容"
              width="300px"
              @ok="handleOk"
            >
              <div>
                <span style="margin-left: 16%; margin-right: 5%">原标签:</span>
                <a-tag color="blue"> {{ record.at_name }}</a-tag>
              </div>
              <div>
                <a-input
                  v-model:value="content"
                  placeholder="请输入你想修改的标签内容"
                  style="width: 70%; margin-left: 16%; margin-top: 2%"
                />
              </div>
            </a-modal>
          </template>
        </a-table>
      </div>
    </div>
    <div>
      <a-button
        type="primary"
        ghost
        @click="checked"
        style="margin-left: 53%; margin-top: 10%; margin-right: 2%"
      >
        审核文章
      </a-button>
      <a-button type="primary" ghost @click="deletearticle">删除文章</a-button>
    </div>
  </div>
</template>
<script setup>
import { cloneDeep } from "lodash-es";
import { defineComponent, reactive, ref } from "vue";
import { post, get, tip, setLocalToken } from "@/common";
import { SearchOutlined, UserOutlined } from "@ant-design/icons-vue";

import { useRoute, useRouter } from "vue-router";
const router = useRouter(); //获取路由器
const route = useRoute(); //获取当前路由器
const jsonstr = decodeURIComponent(route.query.data);
const obj = JSON.parse(jsonstr);

console.log(obj);
const articleid = reactive({
  a_id: obj.a_id,
});

const userid = ref(obj.u_id);
const articletitle = ref(obj.a_title);
const articlecontent = ref(obj.a_html);

// post("/buser/articlemanage/findcontent", articleid).then((res) => {
//   articlecontent.value = ref(res.data);
// });

const tab = ref([]);

post("/buser/articlemanage/getarticletab", articleid).then((res) => {
  tab.value = res.data;
  var el = document.createElement("div");
  el.innerHTML = articlecontent.value;
  var elContainer = document.getElementById("art-container");
  elContainer.appendChild(el);
});

const checked = () => {
  post("/buser/articlemanage/ifchecked", articleid).then((res) => {
    console.log(res.data);
    tip.success("审核已通过");
  });
};

const deletearticle = () => {
  post("/buser/articlemanage/deletearticle", articleid).then((res) => {
    console.log(res.data);
    tip.success("已删除");
  });
};

const columns2 = [
  {
    title: "标签号",
    dataIndex: "at_tab",
    width: "30%",
    slots: {
      customRender: "at_tab",
    },
  },
  {
    title: "标签名",
    dataIndex: "at_name",
    width: "20%",
    slots: {
      customRender: "at_name",
    },
  },
  {
    title: "操作",
    dataIndex: "action",
    width: "50%",
    slots: {
      customRender: "action",
    },
  },
];
for (let i = 0; i < tab.length; i++) {
  data.push({
    a_id: `${data[i].a_id}`,
    u_id: `${data[i].u_id}`,
    at_name: `${date[i].at_name}`,
    at_tab: `${data[i].at_tab}`,
  });
}
const dataSource2 = ref(tab);

//文章标签
const tabid = reactive({
  at_tab: "",
});

const id = reactive({
  a_id: "",
  at_tab: "",
});

//删除文章对应标签
const deletetab = (articletab) => {
  tabid.at_tab = articletab;
  id.a_id = articleid.a_id;
  id.at_tab = tabid.at_tab;
  post("/buser/articlemanage/deleteattab", id).then((res) => {
    console.log(res.data);
  });
};

//修改文章标签
const visible = ref(false);

const showModal = (tabnumber) => {
  visible.value = true;
  tabid.at_tab = tabnumber;
};

const content = ref("");

const tabchange = reactive({
  at_name: "",
  at_tab: "",
});

const handleOk = (e) => {
  tabchange.at_name = content;
  tabchange.at_tab = tabid.at_tab;
  post("/buser/articlemanage/changetab", tabchange).then((res) => {
    console.log(tabchange);
  });
  console.log(e);
  visible.value = false;
};
</script>
<style>
.title {
  margin-left: 15%;
}
.concrete {
  width: 100%;
  height: 100%;
  margin-left: 15%;
  flex-direction: row;
  display: flex;
}
.article {
  width: 53%;
  height: 100%;
  margin-right: 4%;
  margin-top: 1%;
  background-color: rgba(204, 204, 204, 0.3);
  box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px 1px;
}
</style>